import echarts from 'echarts'
import 'echarts/map/js/world'
import axios from 'axios'
// 导入 Resize 函数（图表随着页面大小自动缩放）
const resizeChart = require('./resize');
// chinaMap chart
(function () {
    const myChart = echarts.init(document.querySelector('.world_map'))
    const myChart_rose = echarts.init(document.querySelector('.rose_chart'));

    // 发送请求获取各省数据
    axios.get('http://localhost:8080/api').then(res => {
        const result = res.data.getListByCountryTypeService2true
        // 世界图数组
        let filterArr = []
        // 玫瑰图legenddata
        let legenddata = []

        // 过滤出合适的属性值
        result.forEach((item) => {
            filterArr.push({
                name: item.provinceName, // 国家
                value: item.confirmedCount, // 累计确诊
                deadCount: item.deadCount, // 死亡人数
                curedCount: item.curedCount, // 治愈人数
            })

            legenddata.push({
                name: item.provinceName,
                Confirmed: item.confirmedCount,
                Dead: item.deadCount
            })
        })
        // console.log(filterArr);
        // console.log(legenddata);

        // 根据Confirmed属性值对 legenddata 数组进行排序
        function compare (key) {
            return function (value1, value2) {
                var a = value1[key];
                var b = value2[key];
                return b - a;
            }
        }
        let legendData = legenddata.sort(compare('Confirmed'));

        // 把name，Confirmed，Dead以数组形式push到source数据列表中
        let a = []
        legendData.forEach(ele => {
            a.push([ele.name, ele.Confirmed, ((ele.Confirmed / 1000) > 1000 ? (ele.Confirmed / 1000) * 0.25 : (ele.Confirmed / 1000)), ele.Dead])
        });

        let source = [['Country', 'Confirmed', 'SQRT', 'Dead']]
        source = source.concat(a.slice(0, 15))
        // console.log(source);

        // 世界地图数据及显示形式
        const nameMap = {
            'Singapore Rep.': '新加坡',
            'Dominican Rep.': '多米尼加',
            'Palestine': '巴勒斯坦',
            'Bahamas': '巴哈马',
            'Timor-Leste': '东帝汶',
            'Afghanistan': '阿富汗',
            'Guinea-Bissau': '几内亚比绍',
            "Côte d'Ivoire": '科特迪瓦',
            'Siachen Glacier': '锡亚琴冰川',
            "Br. Indian Ocean Ter.": '英属印度洋领土',
            'Angola': '安哥拉',
            'Albania': '阿尔巴尼亚',
            'United Arab Emirates': '阿联酋',
            'Argentina': '阿根廷',
            'Armenia': '亚美尼亚',
            'French Southern and Antarctic Lands': '法属南半球和南极领地',
            'Australia': '澳大利亚',
            'Austria': '奥地利',
            'Azerbaijan': '阿塞拜疆',
            'Burundi': '布隆迪',
            'Belgium': '比利时',
            'Benin': '贝宁',
            'Burkina Faso': '布基纳法索',
            'Bangladesh': '孟加拉国',
            'Bulgaria': '保加利亚',
            'The Bahamas': '巴哈马',
            'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
            'Belarus': '白俄罗斯',
            'Belize': '伯利兹',
            'Bermuda': '百慕大',
            'Bolivia': '玻利维亚',
            'Brazil': '巴西',
            'Brunei': '文莱',
            'Bhutan': '不丹',
            'Botswana': '博茨瓦纳',
            'Central African Rep.': '中非',
            'Canada': '加拿大',
            'Switzerland': '瑞士',
            'Chile': '智利',
            'China': '中国',
            'Ivory Coast': '象牙海岸',
            'Cameroon': '喀麦隆',
            'Dem. Rep. Congo': '刚果民主共和国',
            'Congo': '刚果',
            'Colombia': '哥伦比亚',
            'Costa Rica': '哥斯达黎加',
            'Cuba': '古巴',
            'N. Cyprus': '北塞浦路斯',
            'Cyprus': '塞浦路斯',
            'Czech Rep.': '捷克',
            'Germany': '德国',
            'Djibouti': '吉布提',
            'Denmark': '丹麦',
            'Algeria': '阿尔及利亚',
            'Ecuador': '厄瓜多尔',
            'Egypt': '埃及',
            'Eritrea': '厄立特里亚',
            'Spain': '西班牙',
            'Estonia': '爱沙尼亚',
            'Ethiopia': '埃塞俄比亚',
            'Finland': '芬兰',
            'Fiji': '斐',
            'Falkland Islands': '福克兰群岛',
            'France': '法国',
            'Gabon': '加蓬',
            'United Kingdom': '英国',
            'Georgia': '格鲁吉亚',
            'Ghana': '加纳',
            'Guinea': '几内亚',
            'Gambia': '冈比亚',
            'Guinea Bissau': '几内亚比绍',
            'Eq. Guinea': '赤道几内亚',
            'Greece': '希腊',
            'Greenland': '格陵兰',
            'Guatemala': '危地马拉',
            'French Guiana': '法属圭亚那',
            'Guyana': '圭亚那',
            'Honduras': '洪都拉斯',
            'Croatia': '克罗地亚',
            'Haiti': '海地',
            'Hungary': '匈牙利',
            'Indonesia': '印度尼西亚',
            'India': '印度',
            'Ireland': '爱尔兰',
            'Iran': '伊朗',
            'Iraq': '伊拉克',
            'Iceland': '冰岛',
            'Israel': '以色列',
            'Italy': '意大利',
            'Jamaica': '牙买加',
            'Jordan': '约旦',
            'Japan': '日本',
            'Kazakhstan': '哈萨克斯坦',
            'Kenya': '肯尼亚',
            'Kyrgyzstan': '吉尔吉斯斯坦',
            'Cambodia': '柬埔寨',
            'Korea': '韩国',
            'Kosovo': '科索沃',
            'Kuwait': '科威特',
            'Lao PDR': '老挝',
            'Lebanon': '黎巴嫩',
            'Liberia': '利比里亚',
            'Libya': '利比亚',
            'Sri Lanka': '斯里兰卡',
            'Lesotho': '莱索托',
            'Lithuania': '立陶宛',
            'Luxembourg': '卢森堡',
            'Latvia': '拉脱维亚',
            'Morocco': '摩洛哥',
            'Moldova': '摩尔多瓦',
            'Madagascar': '马达加斯加',
            'Mexico': '墨西哥',
            'Macedonia': '马其顿',
            'Mali': '马里',
            'Myanmar': '缅甸',
            'Montenegro': '黑山',
            'Mongolia': '蒙古',
            'Mozambique': '莫桑比克',
            'Mauritania': '毛里塔尼亚',
            'Malawi': '马拉维',
            'Malaysia': '马来西亚',
            'Namibia': '纳米比亚',
            'New Caledonia': '新喀里多尼亚',
            'Niger': '尼日尔',
            'Nigeria': '尼日利亚',
            'Nicaragua': '尼加拉瓜',
            'Netherlands': '荷兰',
            'Norway': '挪威',
            'Nepal': '尼泊尔',
            'New Zealand': '新西兰',
            'Oman': '阿曼',
            'Pakistan': '巴基斯坦',
            'Panama': '巴拿马',
            'Peru': '秘鲁',
            'Philippines': '菲律宾',
            'Papua New Guinea': '巴布亚新几内亚',
            'Poland': '波兰',
            'Puerto Rico': '波多黎各',
            'Dem. Rep. Korea': '朝鲜',
            'Portugal': '葡萄牙',
            'Paraguay': '巴拉圭',
            'Qatar': '卡塔尔',
            'Romania': '罗马尼亚',
            'Russia': '俄罗斯',
            'Rwanda': '卢旺达',
            'W. Sahara': '西撒哈拉',
            'Saudi Arabia': '沙特阿拉伯',
            'Sudan': '苏丹',
            'S. Sudan': '南苏丹',
            'Senegal': '塞内加尔',
            'Solomon Is.': '所罗门群岛',
            'Sierra Leone': '塞拉利昂',
            'El Salvador': '萨尔瓦多',
            'Somaliland': '索马里兰',
            'Somalia': '索马里',
            'Serbia': '塞尔维亚',
            'Suriname': '苏里南',
            'Slovakia': '斯洛伐克',
            'Slovenia': '斯洛文尼亚',
            'Sweden': '瑞典',
            'Swaziland': '斯威士兰',
            'Syria': '叙利亚',
            'Chad': '乍得',
            'Togo': '多哥',
            'Thailand': '泰国',
            'Tajikistan': '塔吉克斯坦',
            'Turkmenistan': '土库曼斯坦',
            'East Timor': '东帝汶',
            'Trinidad and Tobago': '特里尼达和多巴哥',
            'Tunisia': '突尼斯',
            'Turkey': '土耳其',
            'Tanzania': '坦桑尼亚',
            'Uganda': '乌干达',
            'Ukraine': '乌克兰',
            'Uruguay': '乌拉圭',
            'United States': '美国',
            'Uzbekistan': '乌兹别克斯坦',
            'Venezuela': '委内瑞拉',
            'Vietnam': '越南',
            'Vanuatu': '瓦努阿图',
            'West Bank': '西岸',
            'Yemen': '也门',
            'South Africa': '南非',
            'Zambia': '赞比亚',
            'Zimbabwe': '津巴布韦'
        }
        const option = {
            visualMap: [
                {
                    type: 'piecewise', //piecewise分段   continuous连续
                    bottom: '100px',
                    // orient:'horizontal',
                    left: '50px',
                    pieces: [
                        // { gte: 10000 }, // [10000, Infinity]
                        // { gt: 1000, lte: 9999 }, // (1000, 9999]
                        // { gt: 500, lte: 999 }, // (500, 999]
                        // { gt: 100, lte: 499 }, // (100, 499]
                        // { gt: 10, lte: 99 }, // (10, 99]
                        // { gt: 1, lte: 9 }, // (0, 9]
                        // { value: 0 }, // [0]

                        { gte: 50000 }, // [50000, Infinity]
                        { gt: 20000, lte: 49999 }, // (20000, 49999]
                        { gt: 10000, lte: 19999 }, // (10000, 19999]
                        { gt: 1000, lte: 9999 }, // (1000, 9999]
                        { gt: 500, lte: 999 }, // (500, 999]
                        { gt: 1, lte: 499 }, // (1, 499]
                        { value: 0 }, // [0]
                    ],
                    inRange: {
                        // 设置地图颜色
                        color: ['#ffffff', '#ffccbc', '#f59e83', '#e55a4e', '#cb2a2f', '#ae233e', '#811c24']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
            ],
            tooltip: {
                formatter: function (params) {
                    return `
                    地区：${params.name} </br>
                    累计确诊：${(params.data && params.data.value) || 0} </br>
                    累计治愈：${(params.data && params.data.curedCount) || 0} </br>
                    累计死亡：${(params.data && params.data.deadCount) || 0} </br>
                    `
                }
            },
            series: [
                {
                    type: 'map',
                    map: 'world',
                    label: {
                        // 显示国家名称
                        // show: true,
                        textStyle: {
                            color: '#f5f5f5'
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            "areaColor": "rgb(210, 253, 252)"  // 修改鼠标悬停时地图的背景色
                        }
                    },
                    data: filterArr, // 数据数组
                    nameMap: nameMap
                }
            ]
        }
        myChart.setOption(option)

        // 配置玫瑰图数据及显示形式
        const option_rose = {
            dataset: {
                source: source
            },
            toolbox: {
                show: true,//false则不显示工具栏
                // feature: {
                //     saveAsImage: { show: true, type: 'jpeg' }
                // }
            },
            title: {
                text: '全球确诊TOP20',
                subtext: '\n数据源：丁香园',
                x: '60%',
                y: '250',
                textStyle:
                {
                    fontSize: 20,
                    fontWeight: 'bold',
                    fontFamily: 'Microsoft YaHei',
                    color: 'rgba(255,255,255,.7)'
                },
                subtextStyle:
                {
                    fontStyle: 'italic',
                    fontSize: 14
                }
            },
            legend: {
                x: '60%',//水平位置，【left\center\right\数字】
                y: '350',//垂直位置，【top\center\bottom\数字】
                align: 'left',//字在图例的左边或右边【left/right】
                orient: 'vertical',//图例方向【horizontal/vertical】
                icon: "circle",   //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
                textStyle://图例文字
                {
                    fontFamily: '微软雅黑',
                    color: 'rgba(255,255,255,.7)',

                },
                data: legendData.name,
                formatter: function (params) {
                    // console.log('图例参数', params)
                    for (var i = 0; i < legenddata.length; i++) {
                        if (legenddata[i].name == params) {
                            return `${params}——确诊:${legendData[i].Confirmed}\t死亡:${legendData[i].Dead}`;
                        }
                    }
                }

            },

            calculable: true,
            series: [
                {
                    name: '半径模式',
                    type: 'pie',
                    clockWise: false,
                    radius: [20, 400],
                    center: ['40%', '60%'],
                    roseType: 'area',
                    encode: {
                        itemName: 'Country',
                        value: 'SQRT'
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    "#a71a4f", "#bc1540", "#c71b1b", "#d93824", "#ce4018", "#d15122", "#e7741b", "#e58b3d", "#e59524", "#dc9e31", "#da9c2d", "#d2b130", "#bbd337", "#8cc13f", "#67b52d", "#53b440", "#48af54", "#479c7f", "#48a698", "#57868c"
                                ];
                                return colorList[params.dataIndex]
                            },
                            label: {
                                position: 'inside',
                                textStyle:
                                {
                                    fontWeight: 'bold',
                                    fontFamily: 'Microsoft YaHei',
                                    color: '#FAFAFA',
                                    fontSize: 10
                                },
                                //formatter:'{b} \n{@Confirmed}例 \n死亡{@Dead}',//注意这里大小写敏感哦
                                formatter: function (params) {

                                    if (params.data[1] > 9000) {
                                        // return `${params.data[0]}\n确诊:${params.data[1]}\n死亡:${params.data[3]}`;
                                        return `${params.data[0]}`;
                                    }
                                    else { return ""; }
                                },

                            },
                        },
                    },

                },
                {
                    name: '透明圆圈',
                    type: 'pie',
                    radius: [10, 27],
                    center: ['40%', '60%'],
                    itemStyle: {
                        color: 'rgba(250, 250, 250, 0.3)',
                    },
                    data: [
                        { value: 10, name: '' }
                    ]
                },
                {
                    name: '透明圆圈',
                    type: 'pie',
                    radius: [10, 35],
                    center: ['40%', '60%'],
                    itemStyle: {
                        color: 'rgba(250, 250, 250, 0.3)',
                    },
                    data: [
                        { value: 10, name: '' }
                    ]
                }
            ]

        };

        myChart_rose.setOption(option_rose)
    }).catch(err => {
        console.log(err);
    })
    resizeChart(myChart);
    resizeChart(myChart_rose);
})();
